<!--
 * @Author: 搜索结果
 * @Date: 2020-06-30 13:48:19
 * @LastEditTime: 2020-07-07 10:31:02
 * @LastEditors: Please set LastEditors
 * @Description: 搜索结果
 * @FilePath: \jshopping\jkshopping\src\pages\home\searchResult.vue
--> 
<template>
  <div class="searchResult">
  <van-search
  show-action
  placeholder="请输入搜索关键词"
  v-model="keywords"
 
>
  <template #action>
    <div @click="goback">返回</div>
  </template>
</van-search>

    <div class="navigation">
      <div class="lm" >
        综合
        <div class="m">
          <svg
            t="1593570383910"
            class="icon"
            viewBox="0 0 1824 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="773"
            width="100%"
            height="100%"
          @click=" ID1Btn() "
           
          >
            <path
              d="M863.764 270.458c32.518-35.975 85.239-35.975 117.757 0l401.018 443.652c32.519 35.977 19.57 65.14-28.913 65.14h-861.969c-48.485 0-61.43-29.164-28.913-65.14l401.018-443.652z"
              p-id="774"
            />
          </svg>
          <svg
            t="1593570186580"
            class="icon"
            viewBox="0 0 1824 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1110"
            width="100%"
            height="100%"
            @click=" ID2Btn() "
            
            
          >
            <path
              d="M855.721 739.856c30.486 33.728 79.913 33.728 110.397 0l375.954-415.921c30.487-33.729 18.347-61.069-27.103-61.069h-808.099c-45.455 0-57.591 27.341-27.106 61.068l375.955 415.923z"
              p-id="1111"
            />
          </svg>
        </div>
      </div>
      <div class="lm">
        销量
        <div class="m">
          <svg
            t="1593570383910"
            class="icon"
            viewBox="0 0 1824 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="773"
            width="100%"
            height="100%"  @click=" comment1Btn()"
          >
            <path
              d="M863.764 270.458c32.518-35.975 85.239-35.975 117.757 0l401.018 443.652c32.519 35.977 19.57 65.14-28.913 65.14h-861.969c-48.485 0-61.43-29.164-28.913-65.14l401.018-443.652z"
              p-id="774"
            />
          </svg>
          <svg
            t="1593570186580"
            class="icon"
            viewBox="0 0 1824 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1110"
            width="100%"
            height="100%" @click=" comment2Btn()"
          >
            <path
              d="M855.721 739.856c30.486 33.728 79.913 33.728 110.397 0l375.954-415.921c30.487-33.729 18.347-61.069-27.103-61.069h-808.099c-45.455 0-57.591 27.341-27.106 61.068l375.955 415.923z"
              p-id="1111"
            />
          </svg>
        </div>
      </div>
      <div class="lm">
        价格
        <div class="m">
          <svg
            t="1593570383910"
            class="icon"
            viewBox="0 0 1824 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="773"
            width="100%"
            height="100%"
            @click="sort1Btn()"
          >
            <path
              d="M863.764 270.458c32.518-35.975 85.239-35.975 117.757 0l401.018 443.652c32.519 35.977 19.57 65.14-28.913 65.14h-861.969c-48.485 0-61.43-29.164-28.913-65.14l401.018-443.652z"
              p-id="774"
            />
          </svg>
          <svg
            t="1593570186580"
            class="icon"
            viewBox="0 0 1824 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1110"
            width="100%"
            height="100%"
            @click="sort2Btn()"
          >
            <path
              d="M855.721 739.856c30.486 33.728 79.913 33.728 110.397 0l375.954-415.921c30.487-33.729 18.347-61.069-27.103-61.069h-808.099c-45.455 0-57.591 27.341-27.106 61.068l375.955 415.923z"
              p-id="1111"
            />
          </svg>
        </div>
      </div>
      <div class="lm" @click="showPopup">
        筛选
        <svg
          t="1593571992332"
          class="icon"
          viewBox="0 0 1031 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1511"
          width="200"
          height="200"
        >
          <path
            d="M544.24 870.052a24.08 24.08 0 0 1-24.053-24.054V434.555c0-5.755 2.063-11.32 5.816-15.678l182.513-212.265H213.545l167.578 213.074a24.151 24.151 0 0 1 5.145 14.869v245.637l72.458 72.453a23.849 23.849 0 0 1 6.887 17.024 23.916 23.916 0 0 1-7.173 16.958c-4.532 4.464-10.527 6.922-16.881 6.922s-12.355-2.453-16.88-6.922l-79.463-79.468a23.92 23.92 0 0 1-7.045-17.014V442.88L145.126 197.422a24.08 24.08 0 0 1 4.025-33.777 24.151 24.151 0 0 1 14.868-5.145h596.885a23.884 23.884 0 0 1 17.003 7.05 23.875 23.875 0 0 1 7.04 17.014 24.054 24.054 0 0 1-5.811 15.672L568.284 443.47v402.524a24.074 24.074 0 0 1-24.043 24.059z"
            fill="#2C2C2C"
            p-id="1512"
          />
          <path
            d="M660.951 805.99a23.885 23.885 0 0 1-16.998-7.055 23.905 23.905 0 0 1-7.03-17.019 24.084 24.084 0 0 1 24.033-24.033h186.117a24.084 24.084 0 0 1 24.028 24.074 24.084 24.084 0 0 1-24.033 24.033h0.005-186.122z m0-150.553a24.074 24.074 0 0 1-24.028-24.07 24.09 24.09 0 0 1 24.033-24.038h186.117a24.084 24.084 0 0 1 24.028 24.075 24.09 24.09 0 0 1-24.033 24.033h0.005-186.122z m0-148.823c-13.184-0.17-23.839-11.095-23.67-24.356a23.9 23.9 0 0 1 23.747-23.747h186.045c13.261 0 24.049 10.788 24.049 24.054s-10.788 24.054-24.049 24.054H660.951z"
            fill="#2C2C2C"
            p-id="1513"
          />
        </svg>
      </div>
      <!-- 筛选弹出层 -->
      <van-popup closeable v-model="show" position="right" :style="{ height: '100%',width:'85%' }">
        <!-- 价格区域 -->
        <div class="price">
          <p>价格区间</p>
          <van-cell-group>
            <van-field v-model="value" placeholder="最低价" />
          </van-cell-group>
          <h1>至</h1>
          <van-cell-group>
            <van-field v-model="value" placeholder="最高价" />
          </van-cell-group>
        </div>

        <!-- 分类区域 -->
        <div class="classification">
          <p>取货方式</p>
          <div>
          <button class="btn1" @click="btn1data()" :class="showmode ? 'active' : 'btn1'">直邮</button>
            <button class="btn2" @click="btn2data()" :class="!showmode ? 'active' : 'btn1'">自提</button>
          </div>

          <p>分类</p>
          <div>
            <button class="btn1">面部护肤</button>
            <button class="btn2">洗/浴</button>
            <button class="btn">口腔护理</button>
            <button class="btn">香水</button>
            <button class="btn">彩妆</button>
            <button class="btn">防嗮</button>
            <button class="btn">美妆工具</button>
          </div>
          <p>品牌</p>
          <div>
            <button class="btn1">奥迪</button>
            <button class="btn2">其他</button>
          </div>

          <!-- 底部 -->
          <van-button to class="d">重置</van-button>
          <van-button to class="di">确定</van-button>
        </div>
      </van-popup>
    </div>
    <div>
      <div class="commodity">
        <van-grid :column-num="2" :border="false">
          <van-grid-item v-for="item in search(keywords)" :key="item.id">
            <van-image :src="item.goods_thumb" />
            <div class="price">
              <p class="shopname">{{item.goods_name}}</p>
              <span class="newprice">{{item.goods_price | rmb}}</span>
              <!-- 价格 -->
              <van-icon name="like" />
              <div class="comment">
                <p>{{item.comment_count}}个评价&nbsp;&nbsp;{{item.comment_rate}}好评</p>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "@/api/apiList/goods/goods.js";

export default {
  data() {
    return {
      datas: [], //当前热销数据value: 0,
      show: false,
      value: "",
      showmode: true,
      keywords:'' 
     
    };
  },
  methods: {
    search(keywords){
             var newList = []
                    // 创建新的数组newList
                    this.datas.forEach(item => {

                       // 如果indexOf为-1，则说明关键字不存在该字符串中，
                    // 反之，存在或者keywords为空字符串
                        if(item.goods_name.indexOf(keywords) != -1) {//如果包含keywords，增加到数组中，渲染到页面
                            newList.push(item)
                        }
                    });
                    return newList   // 将过滤后的newList返回，提供列表数据渲染

                
                    // return this.datas.filter(item=>{
                    //     if(item.goods_name.indexOf(keywords)!= -1){
                    //         return item
                    //     }//filter方法来循环数组返回的是一个符合条件的新数组
                    // })
                },
    
    // 综合升降序
    ID1Btn() {
      console.log("sort");
      this.datas.sort(this.ids("id"));
    },
    ids(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    ID2Btn() {
      console.log("sort");
      this.datas.sort(this.id("id"));
    },
    id(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },

    // 销量升降序
    comment1Btn() {
      console.log("sort");
      this.datas.sort(this.comments("comment_count"));
    },
    comments(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
      comment2Btn() {
      console.log("sort");
      this.datas.sort(this.comment("comment_count"));
    },
    comment(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },

    // 价格升降序

    // 升序
    sort1Btn() {
      console.log("sort");
      this.datas.sort(this.sortMethod("goods_price"));
    },
    sortMethod(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },

    // 降序
    sort2Btn() {
      console.log("sort");
      this.datas.sort(this.sortMethods("goods_price"));
    },
    sortMethods(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },

    goback() {
      //返回
      this.$router.back();
    },
  
    showPopup() {
      this.show = true;
    },
        btn1data() {
      this.showmode = true;
    },
    btn2data() {
      this.showmode = false;
    },
    //当前热销
    async API_goods() {
      let params = {
        order: "sort",
        sort: "desc"
      };
      return await api.goods(params);
    },

    async jg() {
      let res = await this.API_goods();
      res.config.params = { order: "goods_price" };
      if (res.config.params.sort === "desc") {
        res.config.params.sort = "asc";
      } else {
        res.config.params.sort = "desc";
      }
      console.log(res.config.params);
    }
  },
  async created() {
    //当前热销

    let res = await this.API_goods();
    //当前热销
    if (res.data.code === 200) {
      this.datas = res.data.data.data;
    }
    console.log(res);
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/home/searchResult.scss";
</style>
